 <template>
    <div class="product-wrapper">
        <searchPrdt @emtSearch="clickSearch" :isSearchSub="isSearch"/>

        <div class="custom-topHr"></div>

        <div class="hotKey-wrap" v-if="isSearch">
            <p class="title-01">热门搜索</p>

            <div class="hot-key">
                <span @click="search_item(item)" v-for="(item, index) in hot_search_list"
                        :key="index">{{item}}</span>
            </div>
        </div>

        <div class="hotItem-wrap" v-if="!isSearch">
            <div class="category-select">
                <el-button-group>
                    <el-button @click="navCollapse(false)">
                        全部项目
                        <i class="icon iconfont icon-down1"></i>
                    </el-button>

                    <el-button @click="navCollapse(false)">
                        查看数量
                        <i class="icon iconfont icon-down1"></i>
                    </el-button>

                    <el-button @click="navCollapse(false)">
                        价格筛选
                        <i class="icon iconfont icon-down1"></i>
                    </el-button>
                </el-button-group>
            </div>

            <!-- <div class="hot-search">
                <p class="title-01">热门搜索</p>
                <div class="hot-item">
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                    <span>瘦脸针</span>
                </div>
            </div> -->
        </div>

        <productItem :hotItemSub="hotItem" :isSearch="isSearch" />

        <div class="elMenu-bg" v-if="!isCollapse">
            <i @click="navCollapse(true)" class="icon iconfont icon-guanbi2"></i>
        </div>

        <div class="nav-collapse" :collapse="isCollapse" :class="{'open':isCollapse === false}">
            <div class="custom-topHr"></div>
            <p class="title-txt">
                <span>全部项目</span>
                <i @click="navCollapse(true)" class="icon iconfont icon-guanbi1"></i>
            </p>

            <div class="custom-scrollbar">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#ffffff"
                    text-color="#999999"
                    active-text-color="#BC9F5B"
                >
                    <el-submenu
                        v-for="(item, index) in pcategory_tree"
                        :key="item.id"
                        :index="index + ''"
                    >
                        <template slot="title">
                            <span className="el_title" @click="jump($event,item)">{{item.title}}</span>
                        </template>

                        <el-menu-item-group v-for="(item1, index1) in item.child" :key="item1.id">
                            <router-link :to="{ path: '/product/index', query: {category_id: item1.id} }">
                                <el-menu-item :index="index1 + ''">{{item1.title}}</el-menu-item>
                            </router-link>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import searchPrdt from "./components/search";
import productItem from "./components/productItem";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "product",
  data() {
    return {
      isCollapse: true,
      isSearch: false,
      hotItem: false,
      pcategory_tree: [],
      is_user:false,
      hot_search_list: []
    };
  },
  components: {
    searchPrdt,
    productItem
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    search_item(item){
        window.location.href = '/product/index?keyword=' + item;
    },
    navCollapse(val) {
      if (val) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    },
    clickSearch(val) {
      this.isSearch = val;
    },
      jump(e,item){

          this.$router.push({
              //核心语句
              path: "/product/index",
              query:{category_id:item.id}
          });
          this.navCollapse(true)
          e.stopPropagation()
      }
  },
  created() {
    http.get(this, {
      url: "index/pcategory_tree",
      dataType: "json",
      success: function(data) {
        console.log("产品tree:", data);
        if (data.status == 1) {
          this.pcategory_tree = data.info;
        }
      }
    });

    http.get(this, {
        url: "index/get_site_config",
        data:{
            key: 'HOT_SEARCH'
        },
        dataType: "json",
        success: function(data) {
            console.log("热门搜索:", data);
            if (data.status == 1) {
                this.hot_search_list = data.info;
            }
        }
    });

    if(localStorage.getItem('user_type') == 0){
      this.is_user = true
    }
  }
};
</script>

<style lang="scss">
$letHeight: 0.76rem;

.prdt-select {
  height: 0.8rem;
  line-height: 0.8rem;

  .el-input__inner {
    line-height: 0.8rem;
    background-color: transparent;
    border: none;
    color: $c-mainC;
    font-size: 0.38rem;
    font-weight: 500;

    &::-webkit-input-placeholder {
      color: $c-mainC;
      font-size: 0.38rem;
    }
    &:-moz-placeholder {

      color: $c-mainC;
      font-size: 0.38rem;
    }
    &::-moz-placeholder {

      color: $c-mainC;
      font-size: 0.38rem;
    }
    &:-ms-input-placeholder {

      color: $c-mainC;
      font-size: 0.38rem;
    }
  }

  .el-input .el-select__caret {
    color: $c-mainC;
    font-size: 0.38rem;
    font-weight: 600;
    line-height: 0.8rem;
  }
}

.el-select-dropdown__list {
  li {
    text-align: center;
    font-weight: 500;
    color: $c-mainC;
  }
}

.nav-collapse {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 6rem;
  @extend .transit;
  min-height: 100vh;
  background-color: $c-white-light;
  z-index: $zindex-7;

  &.open {
    transform: translateX(0%);
  }

  .title-txt {
    padding: 0 0.36rem;
    $letHeight: 0.9rem;
    height: $letHeight;
    line-height: $letHeight;

    span {
      font-size: 0.38rem;
      color: $c-mainC;
      float: left;
    }

    i {
      color: $c-mainC;
      font-size: 0.8rem;
      float: right;
    }
  }
}

.el-menu {
  .el-submenu__title {
    font-size: 0.3rem;
    color: $c-themeC !important;
    span {
      color: inherit;
    }
  }

  .el-menu-item {
    font-size: 0.28rem;
  }

  .el-submenu {
    border-top: 0.15rem solid $c-gray-dark;
  }
}

.category-select {
  $letHeight: 0.7rem;
  width: 100%;
  margin: 0.22rem auto !important;
  @extend .cmm-border;

  .el-button {
    line-height: $letHeight;
    background-color: $c-themeBg;
    color: $c-white-light;
    font-size: 0.26rem;
    width: 2.36rem;
    border-right: 0.02rem solid $c-white-light;

    margin-right: 0 !important;
    &:last-child {
      border-right: none;
    }
    span {
      color: inherit;
    }
    i {
      color: inherit;
      margin-left: 0.28rem;
      font-size: 0.28rem;
    }
  }
}
</style>

<style scoped lang="scss">
.hotKey-wrap {
  padding: 0.16rem 0;
  .title-01 {
    line-height: 0.45rem;
    color: $c-gray-dark;
    font-size: 0.32rem;
  }

  .hot-key {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

    span {
      display: inline-block;
      width: 1.32rem;
      height: 0.5rem;
      line-height: 0.5rem;

      text-align: center;
      font-size: 0.32rem;
      margin: 0.1rem 0;
      margin-right: 0.12rem;
      background-color: $c-gray-dark;
      color: $c-mainC;
      border-radius: 0.06rem;

      &:nth-child(5),
      &:nth-child(10),
      &:nth-child(15),
      &:nth-child(20),
      &:nth-child(25),
      &:nth-child(30),
      &:nth-child(35),
      &:nth-child(40) {
        margin-right: 0;
      }
    }
  }
}
</style>

<style scoped lang="scss">
.product-wrapper {
  padding: 0rem 0.2rem 0.24rem 0.2rem;
}

.elMenu-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  right: 0;

  &.open {
    transform: translateX(0%);
  }

  i {
    color: $c-white-light;
    @extend .cmm-translateY;
    font-size: 0.8rem;
    right: 5%;
  }
}

.custom-scrollbar {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 2rem;
}

.hot-search {
  width: 100%;
  padding: 0.24rem 0;

  .title-01 {
    font-size: 0.32rem;
    color: $c-gray-dark;
  }

  .hot-item {
  }
}
    .el_title{
        position: relative;
        z-index: 999999;
    }
    /deep/.el-submenu__icon-arrow{
        font-size: 0.3rem;
    }
    /deep/.el-submenu .el-menu-item{
        border-top:0.013rem solid #eeeeee;
    }
    /deep/.el-menu-item-group__title{
        padding:0
    }
</style>


